<template>
    <div>
        <a-menu
            :items="cateItems.filter((a) => a.parentId == null)"
            :getItemsFunc="(a) => cateItems.filter((b) => b.parentId == a.id)"
            :getIsFolderFunc="(a) => cateItems.some((b) => b.parentId == a.id)"
            @file-click="itemClick"
            style="width: 300px;"
        >
        </a-menu>
        <pre class="language-html"><code>{{ `<a-menu
    :items="cateItems.filter((a) => a.parentId == null)"
    :getItemsFunc="(a) => cateItems.filter((b) => b.parentId == a.id)"
    :getIsFolderFunc="(a) => cateItems.some((b) => b.parentId == a.id)"
    @file-click="itemClick"
    style="width: 300px;"
>
</a-menu>` }}</code></pre>
        <pre class="language-javascript"><code>{{ `export default {
    data() {
        return {
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕' },
                { id: 2, parentId: null, name: '麻辣食品', disabled: true },
                { id: 3, parentId: null, name: '膨化食品' },

                { id: 4, parentId: 1, name: '面包' },
                { id: 5, parentId: 1, name: '蛋糕' },
                { id: 6, parentId: 1, name: '三明' },

                { id: 7, parentId: 2, name: '豆干' },
                { id: 8, parentId: 2, name: '辣条' },
                { id: 9, parentId: 2, name: '凤爪' },

                { id: 10, parentId: 4, name: '面包商品1' },
                { id: 11, parentId: 4, name: '面包商品2' },
                { id: 12, parentId: 4, name: '面包商品3', disabled: true },
            ],
        }
    },
    methods: {
        itemClick(item) {
            alert(item.name)
        }
    }
}` }}</code></pre>
        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :headerList="type.headerList"
                :dataList="type.dataList"
            ></a-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕' },
                { id: 2, parentId: null, name: '麻辣食品', disabled: true },
                { id: 3, parentId: null, name: '膨化食品' },

                { id: 4, parentId: 1, name: '面包' },
                { id: 5, parentId: 1, name: '蛋糕' },
                { id: 6, parentId: 1, name: '三明' },

                { id: 7, parentId: 2, name: '豆干' },
                { id: 8, parentId: 2, name: '辣条' },
                { id: 9, parentId: 2, name: '凤爪' },

                { id: 10, parentId: 4, name: '面包商品1' },
                { id: 11, parentId: 4, name: '面包商品2' },
                { id: 12, parentId: 4, name: '面包商品3', disabled: true },
            ],
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'color', remark: '主题色', type: 'default | primary | secondary | success | warning | error', default: 'default' },
                        { name: 'size', remark: '尺寸', type: 'xs | s | m | l | xl', default: 'm' },
                        { name: 'items', remark: '菜单项列表', type: 'Array', default: '[]' },
                        { name: 'getItemsFunc', remark: '获取子菜单的方法', type: 'Function', default: 'a => a.items' },
                        { name: 'getNameFunc', remark: '获取菜单名称的方法', type: 'Function', default: 'a => a.name' },
                        { name: 'getIsFolderFunc', remark: '获取是否是文件夹的方法', type: 'Function', default: 'a => a.type == 0' },
                    ],
                },
                {
                    name: 'methods',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                    ],
                    dataList: [
                        { name: 'foldAll', remark: '递归折叠所有子菜单项' },
                    ],
                }
            ]
        }
    },
    methods: {
        itemClick(item) {
            alert(item.name)
        }
    }
}
</script>